<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>dict 全局字典管理 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.9b3057af.css" as="style"><link rel="preload" href="/my/assets/js/app.91fb0046.js" as="script"><link rel="preload" href="/my/assets/js/597.873319f7.js" as="script"><link rel="preload" href="/my/assets/js/1837.758538d6.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.9b3057af.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="/my/ui/widgets/" class="nav-link router-link-active">
  补丁
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="/my/ui/widgets/" class="nav-link router-link-active">
  补丁
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/my/ui/widgets/dict.html" aria-current="page" class="active sidebar-link">dict 全局字典管理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#需求" class="sidebar-link">需求：</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#解决方案" class="sidebar-link">解决方案</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#安装命令" class="sidebar-link">安装命令</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#dict-management-提供的方法-使用" class="sidebar-link">dict-management 提供的方法 使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#dictmoduleinit-字典管理vuex模块生成函数" class="sidebar-link">dictModuleInit(): 字典管理Vuex模块生成函数</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#getoptionsmap-使用" class="sidebar-link">getOptionsMap 使用</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#getoptionmap-使用" class="sidebar-link">getOptionMap 使用:</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#findpathinopts-使用" class="sidebar-link">findPathInOpts 使用:</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#formatfilterinit" class="sidebar-link">formatFilterInit</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#工具代码解析" class="sidebar-link">工具代码解析：</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#dictmoduleinit-js" class="sidebar-link">dictModuleInit.js</a></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#getoptionsmap-方法" class="sidebar-link">getOptionsMap()方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/widgets/dict.html#使用案例" class="sidebar-link">使用案例</a></li></ul></li><li><a href="/my/ui/widgets/member-picker.html" class="sidebar-link">仿钉钉人员选择器</a></li><li><a href="/my/ui/widgets/org-member-picker.html" class="sidebar-link">部门人员关联选择器</a></li><li><a href="/my/ui/widgets/list-picker.html" class="sidebar-link">列表选择器</a></li><li><a href="/my/ui/widgets/go-panel-node.html" class="sidebar-link">面板节点模板工具函数</a></li><li><a href="/my/ui/widgets/charts1.html" class="sidebar-link">图表类插件集合1</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="dict-全局字典管理"><a href="#dict-全局字典管理" class="header-anchor">#</a> dict 全局字典管理</h1> <h2 id="需求"><a href="#需求" class="header-anchor">#</a> 需求：</h2> <ul><li>系统中经常需要使用大量的字典数据，用于表单操作（如select、radio、checkbox）；</li> <li>有时后端返回（用于展示）的数据是根据前端表单提交的字典值（后端不进行翻译）；</li> <li>有时用户需要对填写的表单内容在提交前先按固定模板生成文档进行预览，表单中的字典值需要翻译为对应的内容。</li></ul> <p>鉴于以上常见的三种情况（可能有其他需求）， 导致如下问题：</p> <ol><li>页面中需要（异步）获取字典数据的需求变得频繁且不固定。</li> <li>同一个字典数据可能需要在系统多处地方获取调用，造成频繁接口调用</li> <li>同时部分功能在未返回字典数据前不能使用或者影响使用体现。</li> <li>不同开发者对字典的调用方式各有不同，可能造成重复代码的编写。</li></ol> <h2 id="解决方案"><a href="#解决方案" class="header-anchor">#</a> 解决方案</h2> <p>后端尽量确保调用字典的方式单一，且一个类型的字典数据对应一个固定ID；
前端封装一个全局方法函数<code>$getOptionsMap</code>(暂定)，通过传入一个数组，返回字典集合：</p> <blockquote><p><strong>$getOptionsMap() 传参要求</strong></p> <ul><li>传入一个对象的数组</li> <li>数组中每个对象的key 为：
<ul><li>name: 当前页面中 字典数据所对应的字段名称（自定义，根据业务需求命名）</li> <li>code：获取字典数据的唯一ID，通常有后端提供</li> <li>custFetch：获取字典的自定义函数(用于特殊字典)，需要返回一个Promise</li></ul></li></ul></blockquote> <p><strong>期望效果</strong></p> <ul><li>返回一个对象集合：key 为 当前规定字典对应的 name，value为 字典数组（字典数组已具备value、label、id、parentId字段方便表单组件调用）</li> <li>在同一个数组中，同一个字典ID 对应多个 name时，可以只调用一次接口获取字典（此情况多出现在动态表单需求中）</li> <li>当字典数据通过接口获取后，可以缓存在本地，在其他地方再次需要时，无需调接口获取</li></ul> <h2 id="安装命令"><a href="#安装命令" class="header-anchor">#</a> 安装命令</h2> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> run widgets dict
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>执行命令后，工具生成在项目的 <strong><code>&quot;.my/widgets/dict-management&quot;</code></strong> 路径下；</p> <blockquote><p>生成文件目录如下：</p> <ul><li><strong><code>filter/date-format.js</code></strong></li> <li><strong><code>filter/index.js</code></strong></li> <li><strong><code>dict-model.js</code></strong></li> <li><strong><code>dict-opts.js</code></strong></li> <li><strong><code>index.js</code></strong>
其中： “index.js”为 全部工具函数的输出文件， “dict-management”文件夹可以放置于“src/helper”作为工具函数使用</li></ul></blockquote> <h2 id="dict-management-提供的方法-使用"><a href="#dict-management-提供的方法-使用" class="header-anchor">#</a> dict-management 提供的方法 使用</h2> <h3 id="dictmoduleinit-字典管理vuex模块生成函数"><a href="#dictmoduleinit-字典管理vuex模块生成函数" class="header-anchor">#</a> dictModuleInit(): 字典管理Vuex模块生成函数</h3> <h4 id="描述"><a href="#描述" class="header-anchor">#</a> 描述：</h4> <p>此函数 用于在vuex中生成 全局管理字典的 module 子模块</p> <h4 id="使用"><a href="#使用" class="header-anchor">#</a> 使用：</h4> <p>在项目store/modules下面的“dict.js”文件 使用<code>“dictModuleInit”</code>方法生成子模块</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 引入‘addFormatFilter’ 和 ‘dictModuleInit’</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>addFormatFilter<span class="token punctuation">,</span> dictModuleInit<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/helper/dict-management/index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> 
<span class="token keyword">const</span> <span class="token function-variable function">getCommonDict</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">dictCode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 调接口获取字典方法 根据项目实际情况自行编写。</span>
  <span class="token keyword">return</span> <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">'/data/'</span> <span class="token operator">+</span> dictCode <span class="token operator">+</span> <span class="token string">'.json'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token comment">// 接口返回的数组[{label, value, parentId, id, fullName}]</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 将‘addFormatFilter’ 于 ‘getCommonDict’ 传入 module初始化函数</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">dictModuleInit</span><span class="token punctuation">(</span>getCommonDict<span class="token punctuation">,</span> addFormatFilter<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>在 &quot;src/store/index.js&quot; 中引入 dict 的模块文件， 并在modules 中注册</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> dictModule <span class="token keyword">from</span> <span class="token string">'./modules/dict'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// ... </span>
  modules<span class="token operator">:</span> <span class="token punctuation">{</span>
    dict<span class="token operator">:</span> dictModule
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p><strong>getCommonDict</strong>方法的返回数据处理：
getCommonDict 返回的数据 为 字典数组，每个元素必须含有以下字段：</p> <ul><li>label: 字典中文</li> <li>value: 字典对应code</li> <li>id: 字典的id，可以是 字典的code</li> <li>parentId: 当前字典的父id，用于生成树</li> <li>fullName: 字典全名（如省市区全程）， 若无，则以label代替（字典管理内部以实现）。</li></ul></blockquote> <h3 id="getoptionsmap-使用"><a href="#getoptionsmap-使用" class="header-anchor">#</a> getOptionsMap 使用</h3> <h4 id="描述-2"><a href="#描述-2" class="header-anchor">#</a> 描述：</h4> <p>注册字典数据的函数， 根据传入的数组，生成对应的字典数据集合；</p> <h4 id="参数"><a href="#参数" class="header-anchor">#</a> 参数：</h4> <ul><li>@property {Array} [dictList] 当前要获取的字典</li> <li>@property {string} [dictList.name] 字典对应的字段名（按当前模块需求命名）</li> <li>@property {string} [dictList.code] 字典唯一代码（根据接口获取对应字典唯一ID）</li> <li>@property {Function} [custFetch] 自定义的字典获取函数，需要返回 Promise</li></ul> <h4 id="使用-2"><a href="#使用-2" class="header-anchor">#</a> 使用：</h4> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 引入方法</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>getOptionsMap<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/helper/dict-management/index'</span>
<span class="token comment">// 将 “$getOptionsMap” 注册为全局方法</span>
Vue<span class="token punctuation">.</span>$prototype<span class="token punctuation">.</span>$getOptionsMap <span class="token operator">=</span> getOptionsMap
<span class="token keyword">const</span> dictList <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'city'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'CITY'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'org'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'DEPTS'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'other'</span><span class="token punctuation">,</span> 
        code<span class="token operator">:</span> <span class="token string">'CustDicts'</span><span class="token punctuation">,</span> 
        <span class="token function-variable function">custFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'610404'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'渭城区'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'141127'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'岚县'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'710409'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'丰原区'</span><span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
          <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getOptionsMap</span><span class="token punctuation">(</span>dictList<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>optionsMap <span class="token operator">=</span> res 
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="getoptionmap-使用"><a href="#getoptionmap-使用" class="header-anchor">#</a> getOptionMap 使用:</h3> <h4 id="描述-3"><a href="#描述-3" class="header-anchor">#</a> 描述：</h4> <p>根据字典Id 返回 对应字典数据结合</p> <h4 id="参数-2"><a href="#参数-2" class="header-anchor">#</a> 参数：</h4> <p>@property {String} [dictCode] 需要获取的字典数据的对应唯一ID</p> <h4 id="使用-3"><a href="#使用-3" class="header-anchor">#</a> 使用：</h4> <p>使用 <code>“getOptionMap”</code>方法 必须确保 对应ID 的字典 已经获取成功</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>Vue<span class="token punctuation">.</span>$prototype<span class="token punctuation">.</span>$getOptionsMap <span class="token operator">=</span> getOptionsMap
Vue<span class="token punctuation">.</span>$prototype<span class="token punctuation">.</span>$getOptionMap <span class="token operator">=</span> getOptionMap
<span class="token keyword">const</span> dictList <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'city'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'CITY'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'org'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'DEPTS'</span><span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getOptionsMap</span><span class="token punctuation">(</span>dictList<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> cityMap <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getOptionMap</span><span class="token punctuation">(</span><span class="token string">'CITY'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cityMap<span class="token punctuation">)</span> <span class="token comment">// {'440104': {...}, ...}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="findpathinopts-使用"><a href="#findpathinopts-使用" class="header-anchor">#</a> findPathInOpts 使用:</h3> <h4 id="描述-4"><a href="#描述-4" class="header-anchor">#</a> 描述：</h4> <p>根据某个字典ID, 获取完整的 字典层级， 如 用“越秀区” 获取 “广东省广州市越秀区”</p> <blockquote><p>PS: findPathInOpts 与 &quot;$ui/utils/tree&quot; 中的“findPath()”区别是： findPath 在 完整的树状数据中查找。findPathInOpts 在 原始字典数据（一维数组）中查找</p></blockquote> <h4 id="参数-3"><a href="#参数-3" class="header-anchor">#</a> 参数：</h4> <p>@property {String} [dictvalue] 字典项的value / id</p> <h4 id="使用-4"><a href="#使用-4" class="header-anchor">#</a> 使用：</h4> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">findPathInOpts</span><span class="token punctuation">(</span><span class="token string">'440104'</span><span class="token punctuation">)</span> <span class="token comment">// 返回 ['440', '44010', '440104']  </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="formatfilterinit"><a href="#formatfilterinit" class="header-anchor">#</a> formatFilterInit</h3> <h4 id="描述-5"><a href="#描述-5" class="header-anchor">#</a> 描述</h4> <p>根据 全局字典函数<code>getOptionsMap</code>调用后 注册数据的 formatFilter 过滤器文件</p> <h4 id="参数-4"><a href="#参数-4" class="header-anchor">#</a> 参数</h4> <p>项目的 Vuex Store 实例</p> <h4 id="使用-5"><a href="#使用-5" class="header-anchor">#</a> 使用</h4> <p>在 main.js 中引入注册即可</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// main.js </span>
<span class="token comment">// 全局（字典）过滤器</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>formatFilterInit<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/helper/dict-management/index'</span> 
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span>vuexOptions<span class="token punctuation">)</span> <span class="token comment">// 注册 store</span>
<span class="token comment">// 注册全局过滤器‘formFilter’， 需要将store 作为参数传入</span>
Vue<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token string">'formatFilter'</span><span class="token punctuation">,</span> <span class="token function">formatFilter</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>在 代码中使用如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{cityValue|formatFilter('CITY')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--
  其中： cityValue是字典值的赋值变量名，‘CITY’是 获取字典数据的codeId
  建议在使用formatFilter前，在组件或页面 中先调用 getOptionsMap方法。
 --&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="工具代码解析"><a href="#工具代码解析" class="header-anchor">#</a> 工具代码解析：</h2> <h3 id="dictmoduleinit-js"><a href="#dictmoduleinit-js" class="header-anchor">#</a> dictModuleInit.js</h3> <p>此方法生成了“dictModule”， 在dictModule中，注册了<code>fetchDictByCode</code> 的action， 通过异步方式获取 字典数据，并保存在state 中。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> actions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">fetchDictByCode</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> <span class="token punctuation">{</span> dictCode<span class="token punctuation">,</span> custFetch <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// actions 会传入 字典Code 和 自定义获取字典的方法，若没有 自定义方法，则使用前面注册的“getComonDict”方法</span>
      <span class="token keyword">const</span> fetchFn <span class="token operator">=</span> custFetch <span class="token operator">?</span> <span class="token function">custFetch</span><span class="token punctuation">(</span>dictCode<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">getCommonDict</span><span class="token punctuation">(</span>dictCode<span class="token punctuation">)</span> 
      <span class="token keyword">return</span> fetchFn<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
        <span class="token keyword">const</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> res<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span>item 
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          map <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取字典数据后，会以 字典CodeId 作为唯一key 存放在 state中；  </span>
        obj<span class="token punctuation">[</span>dictCode<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">;</span>
        context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setOptions'</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 把单个字典数组解析成以字典value 为key 的 结合，可以用于快速获取字典内容</span>
        arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          map<span class="token punctuation">[</span>r<span class="token punctuation">.</span>value<span class="token punctuation">]</span> <span class="token operator">=</span> r<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setOptionMap'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>dictCode<span class="token punctuation">]</span><span class="token operator">:</span> map <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// actions 方法最终会返回 Promise.resolve</span>
        <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="getoptionsmap-方法"><a href="#getoptionsmap-方法" class="header-anchor">#</a> getOptionsMap()方法</h3> <h5 id="getoptionsmap-方法-2"><a href="#getoptionsmap-方法-2" class="header-anchor">#</a> getOptionsMap()方法</h5> <p>“getOptionsMap()”方法，在Vue中注册后可以在页面中进行调用，其原理是：</p> <ul><li>将传入的 dictList 数组 对 相同的“code” 进行去重合并（确保相同的字典ID仅调用一次接口）</li> <li>将 合并后的接口 转化为 “<code>fetchEditOpt()</code>”方法：
<blockquote><p><strong>fetchEditOpt() 方法</strong></p> <ul><li>fetchEditOpt 方法 return 一个 promise；</li> <li>promise中 先根据 字典CodeID 在 store 的dict module 里面获取已加载的字典数据；</li> <li>若dict module 中没有字典数据，则通过 dict module 中的actions 加载数据并存在store中</li></ul></blockquote></li> <li>最后 用Promise.all() 将 <code>fetchEditOpt()</code>方法的数组 一同调用并最终返回一个字典结合</li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 单个字典数据获取函数 </span>
<span class="token keyword">const</span> <span class="token function-variable function">fetchEditOpt</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">dictCode<span class="token punctuation">,</span> dictNames<span class="token punctuation">,</span> custFetch</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>dict<span class="token punctuation">.</span>options<span class="token punctuation">[</span>dictCode<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 已存在 </span>
      <span class="token keyword">const</span> obj <span class="token operator">=</span> dictNames<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        total<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>dict<span class="token punctuation">.</span>options<span class="token punctuation">[</span>dictCode<span class="token punctuation">]</span>
        <span class="token keyword">return</span> total
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> 
      <span class="token function">resolve</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store
        <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'dict/fetchDictByCode'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> dictCode<span class="token punctuation">,</span> custFetch <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> obj <span class="token operator">=</span> dictNames<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            total<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> res
            <span class="token keyword">return</span> total
          <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> 
          <span class="token function">resolve</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 将DictList 进行合并的函数</span>
<span class="token keyword">const</span> <span class="token function-variable function">_flatDictList</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> fetchMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token keyword">const</span> codeMap <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> custFetch <span class="token operator">=</span> item<span class="token punctuation">.</span>custFetch <span class="token operator">||</span> <span class="token keyword">null</span>
    fetchMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>code<span class="token punctuation">]</span> <span class="token operator">=</span> custFetch
    <span class="token keyword">if</span> <span class="token punctuation">(</span>total<span class="token punctuation">[</span>item<span class="token punctuation">.</span>code<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      total<span class="token punctuation">[</span>item<span class="token punctuation">.</span>code<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      total<span class="token punctuation">[</span>item<span class="token punctuation">.</span>code<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>item<span class="token punctuation">.</span>name<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> total
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> 
  <span class="token keyword">const</span> list <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>codeMap<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">entry</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      code<span class="token operator">:</span> entry<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      names<span class="token operator">:</span> entry<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      custFetch<span class="token operator">:</span> fetchMap<span class="token punctuation">[</span>entry<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span> 
  <span class="token keyword">return</span> list
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getOptionsMap</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">DictList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> fetchActions <span class="token operator">=</span> <span class="token function">_flatDictList</span><span class="token punctuation">(</span>DictList<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">fetchEditOpt</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>item<span class="token punctuation">.</span>code<span class="token punctuation">,</span> item<span class="token punctuation">.</span>names<span class="token punctuation">,</span> item<span class="token punctuation">.</span>custFetch<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>fetchActions<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> optMap <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      total <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>total<span class="token punctuation">,</span> <span class="token operator">...</span>item <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> total<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>optMap<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div><h2 id="使用案例"><a href="#使用案例" class="header-anchor">#</a> 使用案例</h2> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-form</span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>model<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>optionsMap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-cascader</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>城市<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>city<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>optionsMap.city<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-cascader</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-cascader</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>部门<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>org<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>optionsMap.org<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-cascader</span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-cascader</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>地区<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chengshi<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>optionsMap.chengshi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-cascader</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>其他<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>other<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>optionsMap.other<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-select</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-form</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    {{model.city|formatFilter('CITY')}}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      optionsMap<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      model<span class="token operator">:</span> <span class="token punctuation">{</span>
        city<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
        chengshi<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
        dept<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
        other<span class="token operator">:</span> <span class="token string">''</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dictList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'city'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'CITY'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'chengshi'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'CITY'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'org'</span><span class="token punctuation">,</span> code<span class="token operator">:</span> <span class="token string">'DEPTS'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token operator">:</span> <span class="token string">'other'</span><span class="token punctuation">,</span> 
          code<span class="token operator">:</span> <span class="token string">'CustDicts'</span><span class="token punctuation">,</span> 
          <span class="token function-variable function">custFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'610404'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'渭城区'</span><span class="token punctuation">,</span> parentCode<span class="token operator">:</span> <span class="token string">'610400'</span><span class="token punctuation">,</span> sortNo<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'141127'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'岚县'</span><span class="token punctuation">,</span> parentCode<span class="token operator">:</span> <span class="token string">'141100'</span><span class="token punctuation">,</span> sortNo<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>dictCode<span class="token operator">:</span> <span class="token string">'710409'</span><span class="token punctuation">,</span> dictName<span class="token operator">:</span> <span class="token string">'丰原区'</span><span class="token punctuation">,</span> parentCode<span class="token operator">:</span> <span class="token string">'710400'</span><span class="token punctuation">,</span> sortNo<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getOptionsMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>optionsMap <span class="token operator">=</span> res

      <span class="token keyword">const</span> otherOptMap <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getOptionMap</span><span class="token punctuation">(</span><span class="token string">'CustDicts'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>otherOptMap<span class="token punctuation">)</span> <span class="token comment">// 输出 {'610404': {...}, '141127': {...}, }</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/my/ui/widgets/member-picker.html">
        仿钉钉人员选择器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.91fb0046.js" defer></script><script src="/my/assets/js/597.873319f7.js" defer></script><script src="/my/assets/js/1837.758538d6.js" defer></script>
  </body>
</html>
